<template>
    <div class="app-container" ref="appContainer">
        <!-- <div class="header"> -->
        <div>
            <el-form :model="form" style="margin: 20px;max-width:500px" ref="ruleFormRef">
                <el-form-item label="一级推广提成%" prop="one">
                    <el-input v-model="form.one" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="二级推广提成%" prop="two">
                    <el-input v-model="form.two" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="三级推广提成%" prop="three">
                    <el-input v-model="form.three" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="渠道额外分成%" prop="qudao">
                    <el-input v-model="form.qudao" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">修改提交</el-button>
                </el-form-item>
            </el-form>

        </div>


    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Logger } from '@/engine/util/Logger'
import { DateUtil } from '@/engine/util/DateUtil'
import { HttpClient } from '@/utils/HttpClient'
import { nextTick, onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { UIHelper } from '@/utils/UIHelper'
const ruleFormRef = ref<FormInstance>()
let form = ref({ one: 0, two: 0, three: 0, qudao: 0 })

onMounted(() => {
    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        //   loading.value = false
    }, 500)

    HttpClient.get_choushui((data: string) => {
        //   form.value.val = data
        if (data) {
            let arr: Array<string> = data.split(",")
            form.value.one = parseInt(arr[0])
            form.value.two = parseInt(arr[1])
            form.value.three = parseInt(arr[2])
            form.value.qudao = parseInt(arr[3])
        }
    })
})


const submitForm = async (formEl: FormInstance | undefined) => {
    //正整数正则
    var posPattern = /^\d+$/;
    if (!posPattern.test(form.value.one + '')) {
        UIHelper.showMsg("一级推广提成必须为正整数")
        return
    } else if (!posPattern.test(form.value.two + '')) {
        UIHelper.showMsg("二级推广提成必须为正整数")
        return
    } else if (!posPattern.test(form.value.three + '')) {
        UIHelper.showMsg("三级推广提成必须为正整数")
        return
    }
    else if (!posPattern.test(form.value.qudao + '')) {
        UIHelper.showMsg("渠道额外分成必须为正整数")
        return
    }
    let value: string = form.value.one + ',' + form.value.two + ',' + form.value.three + ',' + form.value.qudao
    HttpClient.update_system_setting("choushui", value, () => {
        UIHelper.showMsg("修改成功")
    })
}

</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      